<template>
	<view class="zxc_centent">
		<!-- <u-navbar title="订单" bgColor="#07c160" :placeholder="true" :border="false" leftIcon=" "
			:titleStyle="{ color: '#FFF', fontSize: '32rpx' }"></u-navbar> -->

		<view style="height:100upx">
			<view class="dc">
				<u-tabs :list="tabs" @click="click" :current="current" :scrollable="false" lineColor="#07c160"></u-tabs>
			</view>
		</view>
		<!-- end -->
		<scroll-view style="height: 100vh;" :scroll-y="true" ref="scrollView" @scrolltolower="loadMoreData">
			<view class="list" v-for="(item,index) in list">
				<view class="list_tp">
					<view class="tit">
						订单：{{item.createTime}}
					</view>
					<!-- 0支付超时 1已接单 2待出发 3待到达 4待开始服务 5服务中 6已完成 7已取消 -->
					<view class="status" v-if="item.payStatus === 0">待支付</view>
					<view class="status" v-if="item.payStatus === 1 && item.orderStatus == 0">待核销</view>
					<view class="status" v-if="item.payStatus === 1 && item.orderStatus == 1 && item.judgeStatus === 0">
						待评价
					</view>
					<view class="status" v-if="false">已取消</view>
				</view>
				<view class="list_cen" @click="seedetail(item)" v-for="(val,key) of item.itemListVoList" :key="key">
					<view class="list_cen_info">
						<image :src="val.itemImg ? val.itemImg :'../../static/images/anmo.png'" class="tou_img"></image>
						<view class="list_cen_right">
							<view class="list_cen_right_title">{{val.itemName}} </view>
							<view class="list_cen_right_text">时长：{{val.itemDuration}} 数量：X 1</view>
						</view>
					</view>

					<view class="list_cen_price">
						￥{{val.itemPrice}}
					</view>
				</view>
				<view class="list_bt">
					<view class="list_btn" v-if="item.payStatus === 0" @click="payMoney(item.orderId)">立即支付</view>
					<view class="list_btn" v-if="item.payStatus === 1" @click="seedetail(item)">查看订单</view>
					<view class="list_btn" v-if="item.judgeStatus === 0" @click="appraise(item.orderId)">立即评价</view>
					<view class="list_btn" v-if="item.status ==0 " @click="del">删除订单</view>
					<view class="list_btn"
						v-if="item.status ==2 || item.status ==3 || item.status ==4 ||item.status ==5">
						联系TA</view>
					
					<view class="list_btn"
						v-if="item.status ==1 || item.status ==2 || item.status ==3 || item.status ==4 ||item.status ==5 ||item.status ==6 ||item.status ==7"
						@click="cancellation()">取消订单</view>
					<view class="list_btn" v-if="item.status ==6" @click="complain()">投诉TA</view>
					<view class="list_btn" v-if="item.status ==7" @click="del">删除订单</view>
					<view class="list_btn" v-if="item.status ==7" @click="drawback()">退款进度</view>
				</view>
			</view>
			<view style="height: 20upx;">
				
			</view>
			<!-- end -->
			<!-- 加载更多提示 -->
			<view v-if="showLoading" style="text-align: center; padding: 20px;">
				{{ !isHint ? '加载中...' : '真的没有了...' }}
			</view>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				showLoading: false,
				search: {
					pageNum: 1,
					customerId:'',
					// orderStatus: null,
					// payStatus: null,
					// judgeStatus: null,
				},
				tabs: [{
					name: '全部',
				}, {
					name: '待支付',
				}, {
					name: '待核销'
				}, {
					name: '待评价'
				}, {
					name: '已取消'
				}],
				current: 0,
				list: [],
				dataList: [],
				isOpen: true,
				isHint:0,
			}
		},
		onLoad() {
			this.init()
		},
		watch: {
			current(newVal) {
				switch (newVal) {
					case 0: // 全部
						this.search.pageNum = 1
						this.search.orderStatus = ''
						this.search.payStatus = ''
						this.search.judgeStatus = ''
						break;
					case 1: // 待支付
						this.search.pageNum = 1
						this.search.orderStatus = 0
						this.search.payStatus = 0
						this.search.judgeStatus = null
						break;
					case 2: // 待核销
						this.search.pageNum = 1
						this.search.orderStatus = 0
						this.search.payStatus = 1
						this.search.judgeStatus = null
						break;
					case 3: // 待评价
						this.search.pageNum = 1
						this.search.orderStatus = 1
						this.search.payStatus = 1
						this.search.judgeStatus = 0
						break;
					case 4: // 已取消
						this.search.pageNum = 1
						break;
				}
				console.log(222);
				this.init()
			}
		},
		methods: {
			init() {
				this.isHint= 0,
				this.list = []
				this.search.customerId = uni.getStorageSync('customerId')
				this.$get(this.$api.customerOpenOrderList, this.search,
					(res) => {
						console.log(res);
						this.list = res.data
					}, (res) => {
						uni.hideLoading()
						uni.showToast({
							title: res.msg ? res.msg : '网络错误',
							icon: 'none'
						})
					}, 1, 0)
			},
			loadMoreData() {
				// 模拟异步请求
				if(this.isOpen){
					this.search.pageNum++
					this.showLoading = true;
					this.isOpen = false
					setTimeout(() => {
						// 假设获取到新数据 newData
						let newData = [];
						this.$get(this.$api.customerOpenOrderList, this.search,
							(res) => {
								if(res.data !== null){
									this.isHint = 0
									res.data.forEach(item=>{
										this.list.push(item);
									})
									// 将新数据追加到现有数据列表中
									console.log(this.dataList, 'this.dataList');
								}else{
									this.isHint = 1
								}
								// 隐藏加载中提示
								this.showLoading = false;
							}, (res) => {
								uni.showToast({
									title: res.msg ? res.msg : '网络错误',
									icon: 'none'
								})
							}, 1, 0)
							this.isOpen = true
					}, 1000);
				}
			},
			// 立即评价 
			appraise(id){
				uni.navigateTo({
					url: '/pages/order/detail?orderId=' + id
				})
			},
			// 立即支付
			payMoney(id) {
				uni.navigateTo({
					url: '/pages/order/payOrder?orderId=' + id
				})
			},
			change(index) {
				console.log(index)
				this.value = index;
				// if (this.value == 0) {
				// 	uni.reLaunch({
				// 		url: '/pages/index/index'
				// 	})
				// }
				if (this.value == 1) {
					uni.reLaunch({
						url: '/pages/item/index'
					})
				}
				if (this.value == 2) {
					uni.reLaunch({
						url: '/pages/order/index'
					})
				}
				if (this.value == 3) {
					uni.reLaunch({
						url: '/pagesA/my/index'
					})
				}
			},
			complain() {
				uni.navigateTo({
					url: '/pagesA/complain/index'
				})
			},
			drawback() {
				uni.navigateTo({
					url: '/pages/order/drawback'
				})
			},
			cancellation() {
				uni.showModal({
					title: '提示',
					content: '取消订单将扣除您的权益，确定取消？',
					success: function(res) {
						if (res.confirm) {
							console.log('用户点击确定');
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			},
			del() {
				uni.showModal({
					title: '提示',
					content: '删除订单后不可恢复，确认删除该订单？',
					success: function(res) {
						if (res.confirm) {
							console.log('用户点击确定');
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			},
			seedetail(item) {
				console.log(item);
				if(item.payStatus === 0) return
				const obj = JSON.stringify(item)
				uni.navigateTo({
					url: '/pages/order/detail?info=' + obj
				})
			},
			click(item) {
				this.current = item.index
				console.log('item', item);
			},
		}
	}
</script>

<style lang="scss">
	.zxc_centent {
		padding: 0;
		padding-bottom: 130upx;
	}

	.olf {
		background-color: #07c160;
		color: #fff;
		text-align: center;
		/* position: fixed; */
		height: 80upx;
		line-height: 80upx;
		text-align: center;
		width: 100%;
		z-index: 99;
	}

	.dc {
		background-color: #fff;
		position: fixed;
		width: 100%;
		height: 100upx;
		z-index: 99;
	}

	.list {
		width: 93%;
		margin: 20upx auto 50upx;
		background-color: #fff;
		border-radius: 10upx;
	}

	.list_tp {
		padding: 30upx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		background-color: #f2fdf7;
		border-radius: 10upx 10upx 0 0;
	}

	.tit {
		font-weight: 700;
		width: 70%;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.status {
		font-size: 28upx;
		color: #666;
	}

	.list_cen {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 20upx 30upx 10upx;
		border-bottom: 2upx solid #ededed;
	}

	.list_cen_info {
		display: flex;
		align-items: center;
	}

	.list_cen_price {
		color: red;
		width: 15%;
		font-size: 26upx;
	}

	.tou_img {
		width: 120upx;
		height: 120upx;
		border-radius: 20upx;
	}

	.list_cen_right {
		// width: 77%;
		margin-left: 30upx;
	}

	.list_cen_right_title {
		font-size: 28upx;
		font-weight: 600;
	}

	.list_cen_right_text {
		font-size: 24upx;
		color: #999;
		// margin-bottom: 15upx;
	}

	.list_bt {
		padding: 30upx;
		display: flex;
		align-items: center;
		justify-content: flex-end;
	}

	.list_btn {
		font-size: 24upx;
		border: 2upx solid #999;
		border-radius: 100upx;
		padding: 10upx 20upx;
		color: #333;
		margin-left: 20upx;
	}
</style>